<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>返现管理</BreadcrumbItem>
      <BreadcrumbItem>返现列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        返现规则: <Input type="text"  clearable placeholder="请输入返现规则" style="width: 120px;"/>
      </FormItem>
    </Form>
    <div>
      <Table :columns="columns1" :data="data" :height="height">
        <template slot-scope="{ row }" slot="status">
          <span class="success" v-if="row.status === '1'">正常</span>
          <span class="error" v-else>异常</span>
        </template>
        <template slot-scope="{ row }" slot="order_name">
          <span>{{ row.order_name[0] }}</span>
        </template>
        <template slot-scope="{ row }" slot="is_push">
          <span class="success" v-if="row.is_push == 2">完成</span>
          <span class="error" v-else>未完成</span>
        </template>
        <template slot-scope="{ row }" slot="option">
          <Form ref="formInline"  inline>
            <FormItem>
              <Button type="primary"  size="small" @click="editOne" style="margin-right: 5px">编辑绑卡规则</Button>
              <Button type="primary"  size="small"  @click="editTwo" style="margin-right: 5px">编辑推荐人规则</Button>
              <Button class="button" size="small"  v-hasPermission="['11']" style="margin-right: 5px" :type="row.status == 2?'success':'error' " @click="setStatus(row)">
                <span v-if="row.status == 1">禁用</span>
                <span v-else>启用</span>
              </Button>
            </FormItem>
          </Form>
        </template>
      </Table>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 24px">
      <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
            @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
    </div>
    <Modal v-model="modal3"   :mask-closable="false" width="600" >
      <Form :label-width="80">
        <FormItem> <Radio v-model="single">固定额</Radio></FormItem>
        <FormItem>
          返现数额: <Input type="text" clearable value="10" style="width: 120px;" />
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="modal4"   :mask-closable="false" width="600" >
      <Form  :label-width="80">
        <FormItem label="活动类型 : ">
          <RadioGroup value="first"  @on-change="autoMoney">
            <Radio label="first">固定额</Radio>
            <Radio label="second">比例返现</Radio>
          </RadioGroup>
        </FormItem>
        <div v-if="current1==='first'">
          <FormItem label="返现数额:">
            <Input type="text"   style="width: 200px;" value="100"></Input>
          </FormItem>
        </div>
        <div v-if="current1==='second'">
          <FormItem label="返现比例:">
            <Input type="text"   style="width: 200px;" value="40%"></Input>
          </FormItem>
        </div>
      </Form>
    </Modal>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        current1: 'first',
        single: true,
        params: {
          device_time: [],
          status: 1,
          user_id: "",
          order_id: "",
          activity_id: "",
          page: 1,
          limit: 10,
        },
        total: 0,
        page: {},
        height: this.$store.state.height,
        modal1: false,
        modal3: false,
        modal4: false,
        data1: [
          {
            id: 1,
            title: "机器组3",
          },
          {
            id: 2,
            title: "机器组4",
          },
        ],
        request: {
          device_number: "",
          page: 1,
        },
        columns1: [
          {
            title: "返现规则",
            key: "rules",
            minWidth: 150,
            align: "center"
          },
          {
            title: "返现方式",
            key: "ways",
            minWidth: 300,
            align: "center"
          },
          {
            title: "返现数额(元)/比例(%)",
            key: "cash_money",
            minWidth: 200,
            align: "center"
          },
          {
            title: "推荐人返现方式",
            key: "way2",
            minWidth: 200,
            align: "center"
          },
          {
            title: "推荐人返现数额(元)/比例(%)",
            key: "cash_money2",
            minWidth: 200,
            align: "center"
          },
          {
            title: "状态",
            slot: "status",
            minWidth: 300,
            align: "center"
          },
          {
            title: "操作",
            slot: "option",
            minWidth: 160,
            align: "center",
            fixed: "right"
          }
        ],
        data: [
          {
            user_id: 1,
            rules:'绑卡',
            ways:'固定额',
            cash_money:'10',
            way2: "固定",
            cash_money2: 2
          },
          {
            user_id: 1,
            rules:'充值',
            ways:'比例返现',
            cash_money:'1%',
            way2:'22',
            cash_money2: 6

          }

        ],
        columns2: [
          {
            title: "序号",
            key: "user_id",
            minWidth: 150,
            align: "center"

          },
          {
            title: "日期",
            key: "order_id",
            minWidth: 300,
            align: "center"
          },
          {
            title: "设备编号",
            key: "device_id",
            minWidth: 150,
            align: "center"
          },
          {
            title: "设备名称",
            key: "device_name",
            minWidth: 150,
            align: "center"
          },
          {
            title: "所属门店",
            key: "belong_shop",
            minWidth: 150,
            align: "center",
          },
          {
            title: "订单量",
            key: "order_counts",
            minWidth: 150,
            align: "center",
          },
          {
            title: "客单价",
            key: "customer_price",
            minWidth: 150,
            align: "center",
          },
          {
            title: "总收入",
            key: "total_price",
            minWidth: 150,
            align: "center",
          },
          {
            title: "优惠前总额",
            key: "before_price",
            minWidth: 150,
            align: "center",
          },

          {
            title: "优惠金额",
            key: "discount_price",
            minWidth: 160,
            align: "center",
          }
        ],
        data2: [
          {
            user_id: 1,
            order_id:'2019089898',
            device_id:'康师傅冰红茶柠檬味瓶装500mlx1',
            device_name:'B8370',
            device_time:'0.75',
            belong_shop:'2021-09-18 14:38:15',
            order_counts:'123',
            customer_price:'123',
            total_price:'234',
            before_price:'999',
            discount_price:'10000'
          },
          {
            user_id: 2,
            order_id:'2019089898',
            device_id:'康师傅冰红茶柠檬味瓶装500mlx1',
            device_name:'B8370',
            device_time:'0.75',
            belong_shop:'2021-09-18 14:38:15',
            order_counts:'123',
            customer_price:'123',
            total_price:'234',
            before_price:'999',
            discount_price:'10000'
          },
          {
            user_id: 3,
            order_id:'2019089898',
            device_id:'康师傅冰红茶柠檬味瓶装500mlx1',
            device_name:'B8370',
            device_time:'0.75',
            belong_shop:'ijooz',
            order_counts:'123',
            customer_price:'123',
            total_price:'234',
            before_price:'999',
            discount_price:'10000'
          }
        ],
        role_id:null,
      };
    },
    mounted() {

      this.init();
    },
    methods: {
      autoMoney(current1) {
        this.current1=current1;
      },
      editOne() {
        // this.cancel();
        this.modal3 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });
        }
      },
      editTwo() {
        this.cancel();
        this.modal4 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });
        }
      },
      init() {
        this.axios.post("order/order_list", this.params).then((res) => {
          console.log("this.params: ", this.params);
          if (res.code == 1) {
            console.log(res);
            this.total = res.data.count;
            this.tableData = res.data.list;
          }
        });
      },
      search() {
        this.params.page = 1;
        this.init();
      },
      confirm() {
        this.modal1 = false;
        this.$Message.success("保存成功！");
        this.cancel();
      },
      cancel() {},
      add() {
        this.modal1 = true;
      },
      setStatus(id, status) {
        var text = "确定要" + (status == 1 ? "启用" : "禁用") + "此机器组么？";
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.$Message.success("操作成功");
          },
          onCancel: () => {},
        });
      },
      lists() {},
      timechange(val) {
        console.log(val);
      },
      handleSizeChange(val) {
        this.request.page = 1;
        this.request.limit = val;
        this.lists();
      },
      handleCurrentChange(val) {
        this.params.page = val;
        this.init();
      },
    },
  };
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .door_device{
    position: relative;
    top: -20px;
  }
  .words{
    color: rgb(250, 100, 20);
    font-weight: bold;
    font-size: 20px;
  }
</style>
